import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueDevTools from "vite-plugin-vue-devtools";
// 自动导入vue中hook reactive ref；vueRouter;pinia
import AutoImport from "unplugin-auto-import/vite";
// 自动导入ui-组件 比如element-plus
import Components from "unplugin-vue-components/vite";
// elementplus插件
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
//导入可以自动引入elementplus的样式插件
import {
  createStyleImportPlugin,
  ElementPlusResolve,
} from "vite-plugin-style-import";

// https://vite.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  server: {
    /** 是否开启 HTTPS */
    https: false,
    /** 设置 host: true 才可以使用 Network 的形式，以 IP 访问项目 */
    host: true, // host: "0.0.0.0"
    /** 端口号 */
    port: 5173,
    /** 是否自动打开浏览器 */
    open: false,
    /** 跨域设置允许 */
    cors: true,
    /** 端口被占用时，是否直接退出 */
    strictPort: false,
    /** 接口代理 */
    proxy: {
      '/api': {
        target: 'http://192.168.204.16', //代理地址 凡是使用/api
        changeOrigin: true, //允许跨域请求
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  esbuild: {
    drop: ["console", "debugger"],
  },
  plugins: [
    vueDevTools(),
    vue(),
    AutoImport({
      imports: [
        // 需要自动导入的插件，自定义导入的API
        "vue",
        "vue-router",
        "pinia",
      ],
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [
        // 自动导入 Element Plus 组件
        ElementPlusResolver(),
      ],
    }),
    // 自动引入elementplus样式
    createStyleImportPlugin({
      resolves: [ElementPlusResolve()],
      libs: [
        {
          libraryName: "element-plus",
          esModule: true,
          resolveStyle: (name) => {
            return `element-plus/theme-chalk/${name}.css`;
          },
        },
      ],
    }),
  ],
});
